<template>
	<view class="page">
		<tpf-nav-bar status-bar :hasTitle="true" :fixedHeight="navBar.fixedHeight" :left="navBar.left" :title="navBar.title" :right="navBar.right" @iconTap="navBarIconTap">
			<view class="nav-bar-bg"></view>
		</tpf-nav-bar>
		
		<view class="title-tab">
			<view class="title-tab-bar" v-for="(title, titleIndex) of titleTabConfig.list" :key="titleIndex" @tap="titleTap(titleIndex)">
				<view class="title-tab-bar-item">
					<text class="title-tab-bar-item-text">{{title}}</text>
				</view>
				<view v-if="titleCurrentIndex === titleIndex" class="line"></view>
			</view>
		</view>
		
		<swiper class="content" :current="titleCurrentIndex" @change="contentChange">
			<swiper-item>
				<all ref="all"></all>
			</swiper-item>
			<swiper-item>
				<obligation ref="obligation"></obligation> 
			</swiper-item>
			<swiper-item>
				<receiving ref="receiving"></receiving>
			</swiper-item>
			<swiper-item>
				<consignment ref="consignment"></consignment>
			</swiper-item>
			<swiper-item>
				<compeleted ref="compeleted"></compeleted>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import initConfig from '@/mixins/order/order.js';
	
	import all from './all/all.vue';
	import receiving from './receiving/receiving.vue';
	import obligation from './obligation/obligation.vue';
	import compeleted from './completed/completed.vue';
	import consignment from './consignment/consignment.vue';
	import canceled from './canceled/canceled.vue';
	
	export default {
		mixins: [initConfig],
		components: {
			all,
			receiving,
			obligation,
			compeleted,
			canceled,
			consignment
		},
		data() {
			return {
				titleCurrentIndex: 0,

				componentsClickStatus:[
					{name:"all"},
					{name:"obligation"},
					{name:"receiving"},
					{name:"consignment"},
					{name:"compeleted"},
				]
			};
		},
		onLoad(option) {
			
			if(option.tabid) this.titleCurrentIndex = Number(option.tabid);
			
			//this.componentsStatus = (new Array(this.titleTabConfig.list.length)).fill(false);
			
			this.$nextTick(function(){
				this.componentsClick();
			})
			
		},
		methods: {
			navBarIconTap(id) {
				let that = this;
				const action = {
					back() {
						that.$Helper.tpfJump({type:"navigateBack"});
					},
					message(){
						that.$Helper.tpfJump({url:"/pages/ucenter/message-lists/message-lists"})
					}
				};
				if (action[id]) {
					action[id]();
				} else {
					console.log('功能开发中，敬请期待。。。');
				}
			},
			
			titleTap(index) {
				this.titleCurrentIndex = index;
				this.componentsClick();
			},
			contentChange(e) {
				this.titleCurrentIndex = e.detail.current;
				this.componentsClick();
			},
			componentsClick(){
				if(!this.componentsClickStatus[this.titleCurrentIndex].status){
					this.componentsClickStatus[this.titleCurrentIndex].status = true;
					this.$refs[this.componentsClickStatus[this.titleCurrentIndex].name].getList();
				}
			}
		},
	}
</script>

<style lang="scss">
	.page {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
	
	.nav-bar-bg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		background-color: $uni-bg-color;
	}
	
	.title-tab {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		
		padding: $uni-spacing-row-base $uni-spacing-col-lg;
		background-color: $uni-bg-color;
		
		border-bottom-left-radius: $uni-border-radius-base;
		border-bottom-right-radius: $uni-border-radius-base;
	}
	.title-tab-bar {
		height: $uni-font-size-base*1.8;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.title-tab-bar-item {
		
	}
	.title-tab-bar-item-text {
		font-size: $uni-font-size-base;
	}
	.line {
		width: $uni-font-size-base*1.8;
		height: 8rpx;
		background-image: linear-gradient(to right, $uni-bg-color-red, #FFF);
	}
	
	.content {
		flex: 1;
	}
</style>
